<template>
  <div class="home" v-back="color">
    <p v-show="show">我是v-show的验证</p>
    <p v-C19="show">我是v-C19的验证</p>
    <!-- <button @click="cutColor">切换颜色</button> -->
    <button v-ha:mouseup="cutBig">切换颜色</button>
    <input type="text" v-ha:keyup.16="inputFtn">
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {
  },
  data() {
    return {
      num: 10,
      color: "red",
      show: true
    }
  },
  methods: {
    cutBig() {
      this.color = "#" + Math.random().toString(16).substr(2, 6);
    },
    cutColor() {
      // Math.random()得到一个0-1的随机数
      // "#ffffff"
      // console.log();
      // 色值随机只能取到 f 。
      this.color = "#" + Math.random().toString(16).substr(2, 6);
      // console.log(this.color);
      this.show = !this.show;
    },
    inputFtn(e) {
      console.log(e.target.value);
    }
  },
  directives: { // 自定义指令
    back: {
      update(el, binding, vnode) {
        // console.log(this); // 在指令里面，找不到this
        // console.log(el);
        // console.log(binding);
        // console.log(vnode);
        el.style.background = binding.value;
      },
      bind(el, binding) {
        el.style.background = binding.value;
      }
    },
    C19: {
      inserted(el, binding) {
        // console.log(binding);
        el.style.display = binding.value ? 'block' : 'none';
      },
      update(el, binding) {
        el.style.display = binding.value ? 'block' : 'none';
      }
    }
  }
}
</script>
<style>
.home {
  height: 100px;
}
</style>
